<template>
  <a-modal
    :open="open"
    title="Logistics Information"
    @cancel="handleCancel"
    :footer="null"
    :width="modalWidth"
    class="logistics-modal-container"
    :destroyOnClose="true"
    :maskClosable="true"
  >
    <template v-if="logisticsInfo">
      <div class="logistics-header">
        <div class="logistics-company">
          <div class="label">Logistics Company:</div>
          <div class="value">{{ logisticsInfo.delivery_company?.name || "Unknown" }}</div>
        </div>
        <div class="logistics-number">
          <div class="label">Tracking Number:</div>
          <div class="value">{{ logisticsInfo.delivery_no || "Unknown" }}</div>
        </div>
      </div>
      
      <div v-if="logisticsInfo.order_address" class="recipient-info">
        <div class="label">Recipient Information:</div>
        <div class="value">
          <div>{{ logisticsInfo.order_address.name }}</div>
          <div>{{ logisticsInfo.order_address.phone }}</div>
          <div>{{ logisticsInfo.order_address.full_address }}</div>
        </div>
      </div>
      
      <a-divider>
        <span class="divider-title">Logistics Timeline</span>
      </a-divider>
      
      <div class="logistics-timeline-container">
        <!-- 物流跟踪时间轴 -->
        <a-empty v-if="!hasTrackInfo" description="No logistics tracking information available" />
        <a-timeline v-else>
          <a-timeline-item v-for="(item, index) in trackInfo" :key="index" :color="index === 0 ? 'green' : 'blue'">
            <div class="timeline-content">
              <div class="timeline-time">{{ item.time }}</div>
              <div class="timeline-info">{{ item.context || item.text }}</div>
            </div>
          </a-timeline-item>
        </a-timeline>
      </div>
    </template>
    
    <a-empty v-else description="No logistics information available" />
  </a-modal>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  logisticsInfo: {
    type: Object,
    default: null
  }
});

const emit = defineEmits(['update:open']);

// 计算物流跟踪信息
const trackInfo = computed(() => {
  if (!props.logisticsInfo) return [];
  
  // 兼容多种可能的API返回结构
  if (props.logisticsInfo.delivery_tracks && props.logisticsInfo.delivery_tracks.length > 0) {
    return props.logisticsInfo.delivery_tracks;
  } else if (props.logisticsInfo.delivery_info && props.logisticsInfo.delivery_info.length > 0) {
    return props.logisticsInfo.delivery_info;
  } else if (props.logisticsInfo.tracks && props.logisticsInfo.tracks.length > 0) {
    return props.logisticsInfo.tracks;
  }
  
  return [];
});

// 判断是否有跟踪信息
const hasTrackInfo = computed(() => {
  return trackInfo.value && trackInfo.value.length > 0;
});

// Add window width tracking
const windowWidth = ref(window.innerWidth);
const modalWidth = computed(() => {
  if (windowWidth.value <= 576) {
    return '95%';
  } else if (windowWidth.value <= 768) {
    return '85%';
  } else {
    return '600px';
  }
});

// Add window resize handler
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});

const handleCancel = () => {
  emit('update:open', false);
};
</script>

<style scoped>
.logistics-header {
  display: flex;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.logistics-company, .logistics-number {
  flex: 1;
  min-width: 200px;
}

.recipient-info {
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.label {
  font-weight: 500;
  color: #666;
  margin-bottom: 4px;
}

.value {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.divider-title {
  font-size: 16px;
  font-weight: 500;
  color: #1890ff;
}

.logistics-timeline-container {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

.timeline-content {
  padding: 4px 0;
}

.timeline-time {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.timeline-info {
  color: #666;
  line-height: 1.5;
}

/* Responsive styles */
@media (max-width: 768px) {
  .logistics-modal-container :deep(.ant-modal-content) {
    width: 100%;
    margin: 0;
    padding: 16px;
  }
  
  .logistics-modal-container :deep(.ant-modal-body) {
    padding: 12px;
  }
  
  .logistics-header {
    flex-direction: column;
    gap: 12px;
  }
  
  .logistics-company, .logistics-number {
    min-width: 100%;
  }
  
  .logistics-timeline-container {
    max-height: 50vh;
  }
  
  .value {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .logistics-modal-container :deep(.ant-modal) {
    max-width: 100% !important;
    margin: 0;
    top: 0;
  }
  
  .logistics-modal-container :deep(.ant-modal-content) {
    border-radius: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .logistics-modal-container :deep(.ant-modal-body) {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
  }
  
  .logistics-modal-container :deep(.ant-modal-close) {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    z-index: 999;
  }
  
  .logistics-timeline-container {
    max-height: calc(100vh - 160px);
  }
  
  .timeline-time {
    font-size: 13px;
  }
  
  .timeline-info {
    font-size: 13px;
  }
  
  .value {
    font-size: 13px;
  }
}

/* Add styles to make close button more accessible */
:deep(.ant-modal-close) {
  padding: 8px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.ant-modal-close-x) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
</style> 